<template>
  <div>
    <el-form :model="pointForm" :rules="pointRules" ref="pointForm" label-width="210px" label-position="left" style="width: 400px">
      <!--成功注册-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.register">完成注册</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.register_grade_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.register_consumer_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <!--完善个人资料-->
      <!--<el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.perfect">完善个人资料</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.perfect_consumer_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.perfect_grade_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>-->
      <!--登录（一天一次有效）-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.login">登录（一天一次有效）</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.login_grade_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.login_consumer_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <!--文字评论-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.comment">文字评论</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.comment_grade_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.comment_consumer_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <!--上传图片评论-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.comment_img">上传图片评论</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.comment_img_grade_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.comment_img_consumer_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <!--每个商品首次评论-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.first_comment">每个商品首次评论</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.first_comment_grade_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.first_comment_consumer_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <!--购买商品（1元等于多少积分）-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.buy_goods">购买商品（1元等于多少积分）</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.buy_goods_grade_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.buy_goods_consumer_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <!--选择网上支付-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.online_pay">选择网上支付</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.online_pay_grade_point">
          <template slot="append">等级积分</template>
        </el-input>
        <el-input placeholder="10" size="small" v-model="pointForm.online_pay_consumer_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <!--人民币与积分兑换比例-->
      <el-form-item prop="cancel_order_day">
        <template slot="label">
          <el-checkbox v-model="pointForm.parities">人民币与积分兑换比例</el-checkbox>
        </template>
        <el-input placeholder="10" size="small" v-model="pointForm.parities_point">
          <template slot="append">消费积分</template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onTwoStep">保存设置</el-button>
      </el-form-item>
    </el-form>
    <!--  密码验证  -->
    <el-dialog
      title="二次身份验证"
      :visible.sync="passwordTwoStepDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
      center>
      <span>本操作需要二次身份验证，请输入二次验证密码来完成本次操作</span>
      <el-input
        class="two-step-input"
        placeholder="请输入密码"
        v-model="password"
        type="password"
        clearable>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onCheckPassword()">确 定</el-button>
      </span>
    </el-dialog>
    <!--  短信验证  -->
    <el-dialog
      title="二次身份验证"
      :visible.sync="smsTwoStepDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
      center>
      <span>本操作需要二次身份验证，请点击按钮获取验证码来完成本次操作</span>
      <el-input
        class="two-step-input"
        placeholder="请输入验证码"
        v-model="smsCode"
        clearable>
        <el-button slot="append" @click="onSendSmsCode()" :disabled="codeBtn" >{{ codeMSg }}</el-button>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onCheckSmsCode()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as API_SystemSetting from '@/api/systemSetting'
import * as API_passport from '@/api/passport'

export default {
  name: 'systemSettingsPoint',
  props: ['message_auth', 'password_auth'],
  data() {
    return {
      /** 积分设置 */
      pointForm: {},
      pointRules: {},
      checkboxs: ['buy_goods', 'comment', 'comment_img', 'first_comment', 'login', 'online_pay', 'parities', 'perfect', 'perfect', 'register'],
      // 二次身份验证-密码
      passwordTwoStepDialogVisible: false,
      password: '',
      // 二次身份验证-短信
      smsTwoStepDialogVisible: false,
      smsCode: '',
      codeMSg: '发送验证码',
      codeBtn: false,
      timer: null
    }
  },
  async mounted() {
    /** 获取积分设置 */
    API_SystemSetting.getPointSetting().then(response => {
      this.checkboxs.forEach(key => {
        response[key] = !!response[key]
      })
      this.pointForm = response
    })
  },
  methods: {
    /** 发送验证码 */
    onSendSmsCode() {
      API_passport.sendSmsCode().then(res => {
        this.$message({
          showClose: true,
          message: '验证码已发送，请查收',
          type: 'success'
        })
        // 禁用按钮
        this.codeBtn = true
        this.countdown()
      })
    },

    /** 倒计时 */
    countdown() {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) {
            this.count--
            this.codeMSg = this.count + '秒后重新获取'
          } else {
            this.codeBtn = false
            this.codeMSg = '获取验证码'
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },

    /** 验证验证码 */
    onCheckSmsCode() {
      const params = {
        scene: 'TWO_STEP',
        sms_code: this.smsCode
      }
      API_passport.checkSmsCode(params).then(res => {
        this.handleSavePoint()
        this.smsTwoStepDialogVisible = false
        this.codeBtn = false
        this.codeMSg = '获取验证码'
        clearInterval(this.timer)
        this.timer = null
      })
    },

    /** 验证密码 */
    onCheckPassword() {
      const params = {
        password: this.password
      }
      API_passport.checkPassword(params).then(() => {
        this.handleSavePoint()
        this.passwordTwoStepDialogVisible = false
      })
    },

    /** 二次验证鉴权 */
    async onTwoStep() {
      const that = this
      if (this.message_auth) {
        this.smsCode = ''
        this.smsTwoStepDialogVisible = true
      } else if (this.password_auth) {
        this.password = ''
        this.passwordTwoStepDialogVisible = true
      } else {
        // 没有配置安全验证设置
        this.$message({
          showClose: true,
          message: '请先配置 二次验证配置，即将自动跳转至设置页面',
          type: 'warning',
          onClose: function() {
            that.$router.push({
              name: 'systemSettingsVerification'
            })
          }
        })
      }
    },

    /** 保存积分设置修改 */
    handleSavePoint() {
      const params = this.MixinClone(this.pointForm)
      this.checkboxs.forEach(key => {
        params[key] = params[key] ? 1 : 0
      })
      API_SystemSetting.editPointSetting(params).then(() => {
        this.$message.success('保存成功！')
      })
    }
  }
}
</script>
